import React from 'react'
import {Modal,Form, Input, Button, Upload,message} from 'antd'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { addGoodsActionAsync } from '../../../redux/action/goodsAction';
function AddGoods(props) {
  const handleChangeAvatar=(e)=>{
    if(e.file.response)
    {
      return e.file.response.img
    }
    return '';
  }
  const handleSubmit=async ()=>{
    try{
      const fieldsValue = await GoodsAddForm.validateFields()
      fieldsValue.key=Date.now()+''
      fieldsValue.avatar=process.env.REACT_APP_BASEURL+fieldsValue.avatar
      props.addGoodsActionAsync(fieldsValue)
      GoodsAddForm.resetFields()
      props.close()
      message.success('添加成功!')
    }
    catch{
      message.error('添加失败!')
    }
  }
  const [GoodsAddForm]=Form.useForm()
  return (
    <Modal
      title="添加商品信息"
      okText='添加'
      cancelText='取消'
      visible={props.visible}
      onCancel={()=>{
        GoodsAddForm.resetFields()
        props.close()
        }}
      onOk={handleSubmit}
    >
      <Form
        layout="horizontal"
        form={GoodsAddForm}
        name="GoodsAddForm"
      >
        <Form.Item
          label="图片"
          name="avatar"
          valuePropName="file"
          getValueFromEvent={handleChangeAvatar}
          rules={[
            {
              required: true,
              message: '请上传图片!',
            },
          ]}
        >
          <Upload
            accept="image/*"
            action="/api/upload"
            listType="picture"
          >
            <Button>上传图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          name="name"
          label="名称"
          rules={[
            {
              pattern:/^.{2,10}$/,
              message: '请输入大于两个字符!',
            },
            {
              required: true,
              message: '请输入字符!',
            },
          ]}
        >
          <Input  placeholder='名称' />
        </Form.Item>
        <Form.Item
          name="price"
          label="价格"
          rules={[
            {
              pattern:/\d/,
              message: '请输入数字！',
            },
            {
              required: true,
              message: '请输入价格',
            },
          ]}
        >
          <Input  placeholder='价格' />
        </Form.Item>
        <Form.Item
          name="number"
          label="数量"
          rules={[
            {
              pattern:/\d/,
              message: '请输入数字！',
            },
            {
              required: true,
              message: '请输入数量',
            },
          ]}
        >
          <Input placeholder='数量' />
        </Form.Item>
        <Form.Item
          name="describe"
          label="描述"
          rules={[
            {
              min:2,
              message: '请输入大于等于2个字符！',
            },
            {
              required: true,
              message: '请输入描述',
            },
          ]}
        >
          <Input placeholder='描述' />
        </Form.Item>
      </Form>
    </Modal>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    GoodsList:state.goodsList
	}),
	{addGoodsActionAsync}
)(AddGoods)
